<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="{% static 'users/bulma.css' %}">
    <link rel="stylesheet" href="{% static 'users/style.css' %}">
    <script src="{% static 'users/js/all.min.js' %}"></script>
</head>
<body>
    <!-- 头部导航 -->
    <nav class="navbar is-shadowless">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item" href="/">
                    <h1 class="title is-4 has-text-primary">我的博客</h1>
                </a>
                <a role="button" class="navbar-burger burger" aria-label="menu" data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </a>
            </div>

            <div id="navbarBasicExample" class="navbar-menu">
                <div class="navbar-end">
                    <div class="navbar-item">
                        <div class="dropdown is-hoverable">
                            <div class="dropdown-trigger">
                                <button class="button is-white">
                                    <figure class="image is-32x32">
                                        {% if user.userprofile.image %}
                                            <img class="is-rounded" src="{{ MEDIA_URL }}{{ user.userprofile.image }}" alt="用户头像">
                                        {% else %}
                                            <img class="is-rounded" src="{% static 'users/images/avatar.jpg' %}" alt="默认头像">
                                        {% endif %}
                                    </figure>
                                    <span class="ml-2">
                                        {% if user.userprofile.nike_name %}
                                            {{ user.userprofile.nike_name }}
                                        {% else %}
                                            {{ user.username }}
                                        {% endif %}
                                    </span>
                                    <span class="icon is-small">
                                        <i class="fas fa-angle-down"></i>
                                    </span>
                                </button>
                            </div>
                            <div class="dropdown-menu">
                                <div class="dropdown-content">
                                    <a href="{% url 'users:edit_user_info' %}" class="dropdown-item">
                                        <i class="fas fa-user-cog mr-2"></i>账号设置
                                    </a>
                                    <hr class="dropdown-divider">
                                    <a href="{% url 'users:logout' %}" class="dropdown-item has-text-danger">
                                        <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主体内容 -->
    <section class="section">
        <div class="container">
            <div class="columns">
                <!-- 左侧导航 -->
                <div class="column is-2">
                    <div class="card">
    <div class="card-content">
        <div class="menu">
            <ul class="menu-list">
                <!-- 添加操作 -->
                <li>
                    <a href="{% url 'blog:add_post' %}"
                       class="button is-info is-fullwidth mb-3">
                        <i class="fas fa-plus-circle mr-2"></i>添加文章
                    </a>
                </li>
                <li>
                    <a href="{% url 'blog:add_category' %}"
                       class="button is-warning is-fullwidth mb-3">
                        <i class="fas fa-tag mr-2"></i>新建分类
                    </a>
                </li>
                <li>
                    <a href="{% url 'blog:add_tag' %}"
                       class="button is-warning is-fullwidth">
                        <i class="fas fa-hashtag mr-2"></i>新建标签
                    </a>
                </li>

                <!-- 分隔线 -->
                <hr class="my-4">

                <!-- 删除管理 -->
                <li class="menu-label mt-3">内容管理</li>
                <li>
                    <a href="{% url 'blog:manage_posts' %}"
                       class="button is-danger is-light is-fullwidth mb-2">
                        <i class="fas fa-file-alt mr-2"></i>管理文章
                    </a>
                </li>
                <li>
                    <a href="{% url 'blog:manage_categories' %}"
                       class="button is-danger is-light is-fullwidth mb-2">
                        <i class="fas fa-folder-open mr-2"></i>管理分类
                    </a>
                </li>
                <li>
                    <a href="{% url 'blog:manage_tags' %}"
                       class="button is-danger is-light is-fullwidth">
                        <i class="fas fa-tags mr-2"></i>管理标签
                    </a>
                </li>

                <!-- 用户设置 -->
                <hr class="my-4">
                <li>
                    <a href="{% url 'users:edit_user_info' %}"
                       class="button is-primary is-fullwidth">
                        <i class="fas fa-user-edit mr-2"></i>修改资料
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
                </div>

                <!-- 右侧内容 -->
                <div class="column is-10">
                    <div class="box is-shadowless">
                        <!-- 个人信息头部 -->
                        <div class="media">
                            <div class="media-left">
                                <figure class="image is-128x128">
                                    {% if user.userprofile.image %}
                                        <img class="is-rounded" src="{{ MEDIA_URL }}{{ user.userprofile.image }}">
                                    {% else %}
                                        <img class="is-rounded" src="{% static 'users/images/avatar.jpg' %}">
                                    {% endif %}
                                </figure>
                            </div>
                            <div class="media-content">
                                <div class="content">
                                    <p class="title is-4">
                                        {% if user.userprofile.nike_name %}
                                            {{ user.userprofile.nike_name }}
                                        {% else %}
                                            {{ user.username }}
                                        {% endif %}
                                    </p>
                                    <p class="subtitle is-6 has-text-grey">
                                        {% if user.userprofile.personalized_signature %}
                                            {{ user.userprofile.personalized_signature }}
                                        {% else %}
                                            <span class="has-text-grey-light">这个人很懒，什么都没留下~</span>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- 详细信息 -->
                        <div class="content mt-6">
                            <!-- 个人信息 -->
                            <h3 class="title is-5 has-border-left-primary pl-3">基本信息</h3>
                            <div class="columns is-multiline">
                                <div class="column is-4">
                                    <div class="field">
                                        <label class="label">用户名</label>
                                        <div class="control">
                                            <input class="input" type="text" value="{{ user.username }}" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="column is-4">
                                    <div class="field">
                                        <label class="label">性别</label>
                                        <div class="control">
                                            <input class="input" type="text"
                                                   value="{{ user.userprofile.get_gender_display|default:'未设置' }}" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="column is-4">
                                    <div class="field">
                                        <label class="label">邮箱</label>
                                        <div class="control">
                                            <input class="input" type="text" value="{{ user.email|default:'未设置' }}" readonly>
                                        </div>
                                    </div>
                                </div>
                                <div class="column is-12">
                                    <div class="field">
                                        <label class="label">地址</label>
                                        <div class="control">
                                            <input class="input" type="text"
                                                   value="{{ user.userprofile.address|default:'未设置地址' }}" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 个人简介 -->
                            <h3 class="title is-5 has-border-left-info pl-3 mt-6">个人简介</h3>
                            <div class="box has-background-light">
                                {% if user.userprofile.personl_profile %}
                                    {{ user.userprofile.personl_profile|linebreaks }}
                                {% else %}
                                    <p class="has-text-grey-light">暂无个人介绍</p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
</html>